<template>
  <div class="shop_container">
    <ul class="shop_list">
      <router-link class="shop_li border-1px" v-for="(items,index) of shops" :key="index" tag="li" to="/shop">
        <a>
          <div class="shop_left">
            <img class="shop_img" src="./images/shop/4.jpg">
          </div>
          <div class="shop_right">
            <section class="shop_detail_header">
              <h4 class="shop_title ellipsis">{{items.name}}</h4>
              <ul class="shop_detail_ul">
                <li class="supports">{{items.supports[0].icon_name}}</li>
                <li class="supports">{{items.supports[1].icon_name}}</li>
                <li class="supports">{{items.supports[1].icon_name}}</li>
              </ul>

            </section>
            <section class="shop_rating_order">
              <section class="shop_rating_order_left">
                <star :ratings='items.rating'  :fontSize='fontSize'></star>
                <div class="rating_section">
                  {{items.rating}}
                </div>
                <div class="order_section">
                  月售{{items.float_minimum_order_amount}} 单
                </div>
              </section>
              <section class="shop_rating_order_right">
                <span class="delivery_style delivery_left">硅谷专送
                </span>
                <span class="delivery_style delivery_right">准时达
                </span>
              </section>
            </section>
            <section class="shop_distance">
              <p class="shop_delivery_msg">
                <span>¥{{items.float_minimum_order_amount}} 起送</span>
                <span class="segmentation">/</span>
                <span>配送费约¥{{items.float_delivery_fee}}</span>
              </p>
            </section>
          </div>
        </a>
      </router-link>
    </ul>
  </div>
</template>

<script>


// import ajax from '../../api/ajax'
// console.log(ajax)
// http://localhost:3000/index_category
  //从api/index.js里引入已经封装好的reqCategorys函数
  //由于index.js里的多个方法,这里用解构的方法从里面提取到想要的方法
  // import {reqCategorys} from '../../api/index';

  import star from "../Star/Star";
  import {mapActions} from 'vuex';
  export default {
    props:['shops'],
    data() {
      return {
        fontSize:24

      };
    },
    computed: {

    },
    created() {

    },
    async  mounted() {
    //  let result= await  ajax('/api/index_category');
    //  console.log(result)
    //这里由于吧ajax()都封装在了reqCategorys()里直接调用
    // let result=await reqCategorys();
    // console.log(result.data)

    //this.$store.dispatch(['getCategorys'])  可简写成下面
    // this.getCategorys()



    },
    watch: {

    },
    methods: {
      // ...mapActions(['getCategorys'])

    },
    components: {
      star

    },
  };

</script>

<style scoped lang='stylus'>
  @import "../../common/stylus/mixins.styl"
  .shop_container
    margin-bottom 50px
    .shop_list
      .shop_li
        bottom-border-1px(#f1f1f1)
        width 100%
        >a
          clearFix()
          display block
          box-sizing border-box
          padding 15px 8px
          width 100%
          .shop_left
            float left
            box-sizing border-box
            width 23%
            height 75px
            padding-right 10px
            .shop_img
              display block
              width 100%
              height 100%
          .shop_right
            float right
            width 77%
            .shop_detail_header
              clearFix()
              width 100%
              .shop_title
                float left
                width 140px
                color #333
                font-size 16px
                line-height 16px
                font-weight 700
                &::before
                  content '品牌'
                  display inline-block
                  font-size 11px
                  line-height 11px
                  color #333
                  background-color #ffd930
                  padding 2px 2px
                  border-radius 2px
                  margin-right 5px
              .shop_detail_ul
                float right
                margin-top 3px
                .supports
                  float left
                  font-size 10px
                  color #999
                  border 1px solid #f1f1f1
                  padding 0 2px
                  border-radius 2px
            .shop_rating_order
              clearFix()
              width 100%
              margin-top 18px
              margin-bottom 8px
              .shop_rating_order_left
                float left
                color #ff9a0d
                .rating_section
                  float left
                  font-size 10px
                  color #ff6000
                  margin-left 4px
                .order_section
                  float left
                  font-size 10px
                  color #666
                  transform scale(.8)
              .shop_rating_order_right
                float right
                font-size 0
                .delivery_style
                  transform-origin 35px 0
                  transform scale(.7)
                  display inline-block
                  font-size 12px
                  padding 1px
                  border-radius 2px
                .delivery_left
                  color #fff
                  margin-right -10px
                  background-color #02a774
                  border 1px solid #02a774
                .delivery_right
                  color #02a774
                  border 1px solid #02a774
            .shop_distance
              clearFix()
              width 100%
              font-size 12px
              .shop_delivery_msg
                float left
                transform-origin 0
                transform scale(.9)
                color #666
              .segmentation
                color #ccc

</style>
